<script setup lang="ts">
const props = defineProps<{
  src?: string;
  link?: string;
}>();
const banners = (props.src && props.src?.split(",")) || [
  "https://deface.oss-cn-shenzhen.aliyuncs.com/saas2/content/1713335740378-1948.jpg?Expires=2028695740&OSSAccessKeyId=LTAIrDHmhh8UadK6&Signature=N0Sjg3VqIoKJEkSCysucDakXqY0%3D",
];
</script>

<template>
  <div>
    <el-carousel
      height="39.688vw"
      :interval="3000"
      indicator-position="none"
      :autoplay="false"
      arrow="always"
    >
      <el-carousel-item v-for="item in banners" :key="item">
        <NuxtLink :to="link">
          <img class="banner-img" :src="item" alt="" />
        </NuxtLink>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<style scoped>
:deep(.el-carousel__arrow--left),
:deep(.el-carousel__arrow--right) {
  display: none !important;
}
.banner-img {
  cursor: pointer;
  display: block;
  width: 100%;
  height: 39.688vw;
  object-fit: cover;
}
@media (max-width: 768px) {
  .banner-img {
    height: 50vw;
  }
}
</style>
